<template>
  <div class="cz-overflow-auto">
    <div
      id="cz-toc"
      class="navigation-content"
    >
      <div class="cz-w-full cz-text-center cz-text-[1.25rem]">
        <cz-svg name="catalogue" />
        目录
      </div>
      <md-catalog
        :scroll-element="scrollElement"
        editor-id="preview-only"
      />
    </div>
  </div>
</template>

<script lang='ts' setup>
import { MdCatalog } from 'md-editor-v3';

const scrollElement = document.documentElement;

</script>
<style lang='scss' scoped>

a {
  text-decoration: none;
  color: var(--bs-secondary-color, #4c4948);
  cursor: pointer;
}

:deep(.md-editor-catalog-active) {
  --border-left-color: #009d92;
  background: var(--bs-primary-bg-subtle, #009d92);

  > span {
    color: var(--bs-secondary-color, #4c4948);
  }
}
</style>
